<template>
  <view v-if="headInfo.length > 0">
    <u--text
        type="info" :text="getTranslate(2)" size="8"
        v-if="device === 'mobile'" align="left"
    ></u--text>

    <uni-table
        border stripe :emptyText="getTranslate(3)"
        v-if="(device === 'desktop' && type === 'desktop') || (uniLeftMenuState.matchLeftWindow === true && type === 'desktop')">
      <!-- 表头行 -->
      <uni-tr>
        <uni-th align="center" v-for="(h, i) in headInfo" :key="i" > {{ h.name }}</uni-th>
      </uni-tr>
      <!-- 表格数据行 -->
      <uni-tr v-for="(l, i) in lineInfo" :key="i">
        <uni-th align="center">
          {{ fixName(l.name) }}
        </uni-th>
        <uni-th align="center">
          <view class="table-item">
            <u-button type="primary" :plain="true" :text="getTranslate(4)" size="small" class="table-item-button" @click="clickName(l.name)"></u-button>
            <!--    删除要通知外面的组件，不能直接删除props内容，否则数据不同步        -->
            <u-button type="error" :plain="true" :text="getTranslate(5)" size="small" @click="deleteName(l.name)"></u-button>
          </view>
        </uni-th>
      </uni-tr>
    </uni-table>
    <view v-else>
      <u-list>
        <u-list-item v-for="(item, index) in lineInfo" :key="index">
            <u-button :text="fixName(item.name)" @click="clickName(item.name)"></u-button>
        </u-list-item>
      </u-list>
    </view>

  </view>
</template>

<script>
import appConfig from "../../api/appConfig";
import calCommon from "../../utils/winCal/calCommon";
import SegContentGroup from "../seg-content-group/seg-content-group";
import language from "../../api/language";

export default {
  name: "segContentChoiceDetail",
  components: {SegContentGroup},
  props: {
    headInfo: {
      default: ()=>([
        { name: '图片名称' },
        { name: '操作'}
      ]),
      type: Array
    },
    lineInfo: {
      default: [],
      type: Array
    },
    type: {
      default: 'desktop',  // 用于覆盖行为
      type: String
    }
  },
  mixins: [calCommon],
  methods: {
    getTranslate(posIndex){
      let langDict = language.getTranslate(language.segContentChoiceDetail)
      if (posIndex === 0){
        return langDict.pictureName
      }else if(posIndex === 1){
        return langDict.operate
      }else if(posIndex === 2){
        return langDict.mobileClick
      }else if(posIndex === 3){
        return langDict.noData
      }else if(posIndex === 4){
        return langDict.check
      }else if(posIndex === 5){
        return langDict.deleteData
      }else if(posIndex === 6){
        return langDict.headInfo
      }
    },
    fixName(fileName){
      let splitList = fileName.split('/')
      let name = splitList[splitList.length - 1]
      return name.substr(0, appConfig.system.fixFileNameLength)
    },
    clickName(name){
      this.$emit("clickName", name)
    },
    deleteName(name){
      this.$emit("deleteName", name)
    }

  }
}
</script>

<style scoped>
  .table-item {
    display: flex;
  }
  .table-item-button {
    margin-right: 10px
  }
</style>
